<template>
	<vCommonPage type="1" typeChose="0" title="医技预约" mzlx="2">
		<div slot="customContent" style="width: 100%;" class="yjyyChoseDate">
			<div class="CenterBox">
				<div class="patientName">患者：{{$store.state.user.userinfo.patientName}}</div>
				<div class="proName">项目名称：CT平扫（单个部位）</div>
			</div>

			<div class="choseItemBox" v-loading.fullscreen.lock="fullscreenLoading">
				<div :class="dataList[index].isClick? 'Item click':'Item'"
					v-for="(item,index) in dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					v-bind:key="'xz'+index" @click="clickItem(index,item,$route.query.type)">
					<div :class="dataList[index].isClick? 'ItemText click':'ItemText'">
						{{item.appointmentDate}}
					</div>
					<div :class="dataList[index].isClick? 'ItemTextBtm click':'ItemTextBtm'">
						{{item.amountNum}}
					</div>
				</div>
			</div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				<el-button type="primary" v-show="totalPage>1" :class="totalPage == 1 ? 'huiBottom upPage':'blueBottom upPage'"
					@click="prePage()">
					上一页
				</el-button>
				<div class="pageBox" v-show="totalPage>1">
					<div class="curentPage">{{currentPage}}</div>
					/
					<div class="totalPage">{{totalPage}}</div>
				</div>
				<el-button type="primary" v-show="totalPage>1" :class="totalPage == 1 ? 'huiBottom downPage':'blueBottom downPage'"
					@click="nextPage()">
					下一页
				</el-button>
			</div>
			<vTip v-if="tipText" :tipText="tipText"></vTip>
			<div v-if="tipText" class="yiny" @click="closeYinying()"></div>

		</div>
	</vCommonPage>
</template>
<script>
	//获取日期剩余号源
	import {
		getDateAmountList
	} from "@api/apiBox/yjyy"
	export default {
		name: "yjyyChoseDate",
		components: {},
		data() {
			return {
				fullscreenLoading: false,
				currentPage: 1, //初始页
				pagesize: 9, //    每页的数据
				dataList: [],
				totalPage: 0,
				tipText: '',
				formData: {
					beginDate: this.$store.state.yjyy.beginDate, //筛选时间
					cardNo: this.$store.state.appointment.cardNo, //卡片编号
					cardType: this.$store.state.appointment.card.num, //卡片类别
					endDate: this.$store.state.yjyy.endDate, //筛选时间
					patientId: this.$store.state.user.userinfo.patientId, //患者ID
					termId: this.$store.state.terminfo.terminfo.termId, //终端ID
					deptId: this.$store.state.yjyy.toBeReservedItem.deptId//科室ID
				}
			};
		},
		methods: {
			prePage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
				}
			},
			//type为2的时候 是修改时间  1为选择最早时间
			clickItem(index, item, type) {
				this.dataList[index].isClick = true;
				this.$store.dispatch("yjyy/updateAppointmentDate", item.appointmentDate); //存储医技预约科室预约时间
				this.$router.push({
					name: 'yjyyChoseTime',
					query: {
						type: type
					}
				})
			},
			choseTime(date) {
				let index = 0;
				for (let item of this.dataList) {
					if (item.appointmentDate == date) {
						this.clickItem(index, item, 2)
					}
					index += 1;
				}
				this.tipText = "找到不到该日期！";
			},
			closeYinying() {
				this.tipText = "";
			},
			async initData() {
				let data = {
					data: this.formData,
					that:this
				}
				const res = await getDateAmountList(data);
				this.dataList = res.data;
				console.log(res,'数据！')
				//type为1时自动预约最早号源
				if (this.$route.query.type == 1) {
					if (this.dataList.length == 0) {
						this.tipText = "暂无号源！"
					} else {
						this.clickItem(0, this.dataList[0], 1)
					}
				}
				// //修改预约时间
				// else if (this.$route.query.type == 2) {
				// 	let date = this.$route.query.date;
				// 	this.choseTime(date);
				// }
				this.totalPage = parseInt((this.dataList.length + this.pagesize - 1) / this.pagesize)

			}
		},
		computed: {

		},
		watch: {
		},
		mounted() {},
		created() {
			this.initData();
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.choseItemBox {
		display: flex;
		flex-wrap: wrap;
		margin-top: 50px;
		width: 100%;
		padding-top: 30px;
		justify-content: center;
	}

	.Item {
		margin: 16px;
		height: 124px;
		min-width: 304px;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		background: #FFFFFF;
		/*实现垂直居中*/
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		text-align: center;
	}

	.ItemText {
		width: 100%;
		padding: 0px 20px;
		font-size: 2.742857rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		padding-top: 20px;
	}

	.ItemTextBtm {
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #46C349;
		padding-bottom: 10px;
	}

	.click {
		color: #FFFFFF !important;
		background: #46C349 !important;
	}

	.CenterBox {
		display: flex;
		width: 100%;
	}

	.left {
		width: 50%;
		text-align: left;
	}

	.patientName {
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		position: absolute;
		left: 39px;
	}

	.proName {
		position: absolute;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		right: 39px;

	}
</style>

<style>
	.yjyyChoseDate .tipText{
			width: 80%;
	}
</style>
